<!-- 登录页面 -->
<template>
    <div class="login">
        <el-row>
            <el-col :span="7" :xs="0"></el-col>
            <el-col :span="10" :xs="24">
                <el-form :model="loginForm" :rules="rules" ref="loginForms">
                    <h1>Hello</h1>
                    <p>欢迎来到助农扶贫后台管理系统</p>
                    <el-form-item prop="userAccount">
                        <el-input :prefix-icon="User" v-model="loginForm.userAccount"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="default" :loading="loading" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="7" :xs="0"></el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
// 引入仓库
import useUserStore from '../../store/modules/user'
// 引入获取时间的函数 getTime
import { getTime } from '../../utils/time'


// 手机账号和密码
let loginForm = reactive({
    userAccount: 'admin',
    password: '123456'
})
let userStore = useUserStore()
let $router = useRouter()
let $route = useRoute()
// 登录按钮 加载效果
let loading = ref(false)
// 获取el-form组件
let loginForms = ref()


const login = async () => {
    // 表单校验
    await loginForms.value.validate();
    // 点击按钮 加载效果 出现
    loading.value = true
    // 可以用try catch,也可以用.then方法 userStore.userLogin(loginForm).then()
    try {
        // 登陆成功
        await userStore.userLogin(loginForm)
        // 判断当前路径是否有query参数 有跳转到query携带的页面 没有则跳转到首页
        let redirect: any = $route.query.redirect
        $router.push({ path: redirect || '/' })
        ElNotification({
            type: 'success',
            title: `Hi,${getTime()}好`,
            message: '欢迎回来'
        })
        // 登录按钮 加载 效果消失
        loading.value = false
    } catch (error) {
        // 登陆失败
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
        // 登录按钮 加载效果 消失
        loading.value = false
    }
}

// 表单校验
const rules = {
    userAccount: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}

</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    background: url('../../../public/login_bg_img.jfif') no-repeat;
    background-size: cover;
    background-position: center;

    .el-form {
        width: 80%;
        padding: 20px 50px;
        border: 3px solid white;
        position: relative;
        top: 25vh;
        left: 40px;

        h1 {
            font-size: 40px;
        }

        p {
            font-size: 18px;
            padding: 20px 0;
        }

        .el-button {
            width: 100%;
        }
    }
}
</style>